<template>
  <el-row :gutter="20" class="flex">
    <el-col style="width: 220px">
      <el-button v-if="isAuth('sys/menu/add')" type="primary" @click="addTopMenu()" style="margin-bottom: 20px;width:100%"
        >添加菜单</el-button
      >
      <el-tree
        :data="treeData"
        :props="defaultProps"
        default-expand-all
        @node-click="clickNode"
        :expand-on-click-node="false"
        highlight-current
        :indent="6"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ data.title }}</span>
          <span>
            <el-button
              v-if="node.level == 1 && isAuth('sys/menu/add')"
              type="text"
              size="mini"
              @click.stop="addMenu(node, data)"
              title="添加"
            >
              <i class="el-icon-circle-plus-outline"></i>
            </el-button>
            <el-button
              v-if="isAuth('sys/menu/toggle')"
              type="text"
              size="mini"
              @click.stop="setToggleMenu(node, data)"
              :title="data.status == 1?'禁用':'启用'"
            >
              <i v-if="data.status == 1" class="el-icon-remove-outline"></i>
              <i v-else-if="data.status == 0" class="el-icon-video-play"></i>
            </el-button>
            <el-button
              v-if="isAuth('sys/menu/edit')"
              type="text"
              size="mini"
              @click.stop="editMenu(node, data)"
              title="编辑"
            >
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button
              v-if="isAuth('sys/menu/del')"
              type="text"
              size="mini"
              @click.stop="removeMenu(node, data)"
              title="删除"
            >
              <i class="el-icon-circle-close"></i>
            </el-button>
          </span>
        </span>
      </el-tree>
    </el-col>

    <el-col>
      <div class="fl-ac mb-10">
        <div>
          {{ this.menuData.title }}
        </div>
        <el-button v-if="isAuth('sys/menu/add')" type="primary" @click="addFunction(menuData)">
          新增功能
        </el-button>
      </div>

      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="menu_id"
        border
        stripe
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
         <el-table-column width="55" label="序号">
        <template slot-scope="scope">
          <span>{{ (PageData.page - 1) * PageData.limit + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
        <el-table-column prop="title" label="功能名称"> </el-table-column>
        <el-table-column prop="path" label="功能路径"></el-table-column>
        <el-table-column prop="remark" label="功能描述"> </el-table-column>

        <el-table-column prop="statu" label="状态" v-if="isAuth('sys/menu/toggle')">
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="scope.row.status === 1"
              @click="setToggle(scope.row)"
              >启用</el-button
            >
            <el-button
              type="text"
              v-if="scope.row.status === 0"
              @click="setToggle(scope.row)"
              >禁用</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="icon" label="操作">
          <template slot-scope="scope">
            <el-button v-if="isAuth('sys/menu/edit')" type="text" @click="editHandle(scope.row)"
              >编辑</el-button
            >
            <el-button v-if="isAuth('sys/menu/del')" type="text" @click="removeHandle(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--新增对话框dialogVisible1-->
      <el-dialog
        :title="formShow?`上级菜单：${editForm.parentTitle}`:`编辑菜单`"
        :visible.sync="dialogVisible1"
        width="600px"
        :before-close="handleClose"
      >
        <el-form
          :model="editForm"
          :rules="editFormRules"
          ref="editForm"
          label-width="100px"
          class="demo-editForm"
        >
          <el-form-item label="菜单名称" prop="title" label-width="100px">
            <el-input v-model="editForm.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="icon" label-width="100px">
            <el-input v-model="editForm.icon" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="菜单URL" prop="path" label-width="100px">
            <el-input v-model="editForm.path" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="功能备注" prop="remark" label-width="100px">
            <el-input v-model="editForm.remark" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="排序号" prop="sort" label-width="100px">
            <el-input-number v-model="editForm.sort" :min="0" label="排序号"
              >0</el-input-number
            >
          </el-form-item>

          <el-form-item>
            <el-button
              v-show="formShow"
              type="primary"
              @click="submitForm('editForm')"
              >立即创建</el-button
            >
            <el-button
              v-show="!formShow"
              type="primary"
              @click="submitForm2('editForm')"
              >确认修改</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>

      <!--新增对话框dialogVisible2-->
      <el-dialog
        :title="`上级菜单：${editForm.parentTitle}`"
        :visible.sync="dialogVisible2"
        width="600px"
        :before-close="handleClose2"
      >
        <el-form
          :model="editForm"
          :rules="editFormRules3"
          ref="editForm2"
          label-width="100px"
          class="demo-editForm"
        >
          <el-form-item label="功能名称" prop="title" label-width="100px">
            <el-input v-model="editForm.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="功能路径" prop="path" label-width="100px">
            <el-input v-model="editForm.path" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="功能备注" prop="remark" label-width="100px">
            <el-input v-model="editForm.remark" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="排序号" prop="sort" label-width="100px">
            <el-input-number v-model="editForm.sort" :min="0" label="排序号"
              >0</el-input-number>
          </el-form-item>

          <el-form-item>
            <el-button v-show="formShow" type="primary" @click="submitForm3('editForm2')"
              >立即添加</el-button>
            <el-button
              v-show="!formShow"
              type="primary"
              @click="submitForm4('editForm2')"
              >确认修改</el-button>
            <!-- <el-button @click="resetForm3('editForm2')">重置</el-button> -->
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-col>
  </el-row>
</template>

<script>
import router from "../../router";
export default {
  name: "Menu",
  data() {
    return {
      dialogVisible1: false,
      dialogVisible2: false,
      editForm: { sort: 0 },
      editForm2: { sort: 0 },
      formShow: true,
      editFormRules: this.editFormRules1,
      editFormRules1: {
        title: [{ required: true, message: "请输入组件标题", trigger: "blur" }],
        remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
        // icon: [{ required: true, message: "请输入图标名称", trigger: "blur" }],
        path: [{ required: true, message: "请输入菜单路径", trigger: "blur" }],
        menu_type: [{ required: true, message: "请选择状态", trigger: "blur" }],
        // sort: [{ required: true, message: "请填入排序号", trigger: "blur" }],
      },
      editFormRules2: {
        menu_id: [
          { required: true, message: "请选择上级菜单", trigger: "blur" },
        ],
        title: [{ required: true, message: "请输入组件标题", trigger: "blur" }],
        name: [{ required: true, message: "请输入组件名称", trigger: "blur" }],
        remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
        // icon: [{ required: true, message: "请输入图标名称", trigger: "blur" }],
        path: [{ required: true, message: "请输入菜单路径", trigger: "blur" }],
        // sort: [{ required: true, message: "请填入排序号", trigger: "blur" }],
      },
      editFormRules3: {
        title: [{ required: true, message: "请输入功能名称", trigger: "blur" }],
        path: [{ required: true, message: "请输入功能路径", trigger: "blur" }],
        remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
        // sort: [{ required: true, message: "请填入排序号", trigger: "blur" }],
      },
      treeData: [],
      defaultProps: {
        children: "children",
        label: "title",
      },
      tableData: [],
      PageData: {
        page: 1,
        limit: 10,
      },
      hoverShow: false,
      menuData: {},
    };
  },
  created() {
    this.getMenuTree();
  },
  methods: {
    //获取菜单列表
    getMenuTree() {
      this.$axios.post("admin/menu/menu_list",{platform:1}).then((res) => {
        this.treeData = res.data.data.menu;
        this.menuData = this.treeData[0].children[0];
        this.clickNode(this.menuData,{level:2});
      });
    },
    //节点点击事件
    clickNode(data, node) {
      // console.log(data,node);
      if (node.level == 1) {
        return;
      }
      let data2 = {
        page: this.PageData.page,
        limit: this.PageData.limit,
        id: data.menu_id,
      };
      this.menuData = data;
      this.$axios.post("admin/menu/index_func", data2).then((res) => {
        this.tableData = res.data.data.list;
      });
    },
    //左侧新增提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(this.editForm);
          this.editForm.menu_platform = 1;
          this.editForm.parent_id = JSON.parse(
            JSON.stringify(this.editForm.menu_id)
          );
          delete this.editForm.menu_id;
          this.$axios.post("admin/menu/add", this.editForm).then((res) => {
            this.$message({
              showClose: true,
              message: "添加成功",
              type: "success",
            });
            this.getMenuTree();
            this.dialogVisible1 = false;
          });
        } else {
          // this.$message.error('请填写完整信息')
          return false;
        }
      });
    },
    //左侧编辑提交
    submitForm2(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(this.editForm);
          // this.editForm.menu_platform = 1
          this.$axios.post("admin/menu/edit", this.editForm).then((res) => {
            this.$message({
              showClose: true,
              message: "修改成功",
              type: "success",
            });
            this.getMenuTree();
            this.dialogVisible1 = false;
          });
        } else {
          this.$message.error("请填写完整信息");
          return false;
        }
      });
    },
    //重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.editForm = { sort: 0 };
    },
    //关闭表单
    handleClose() {
      this.resetForm("editForm");
      this.dialogVisible1 = false;
    },
    delHandle(id) {
      this.$axios.post("/sys/menu/delete/" + id).then((res) => {
        this.$message({
          showClose: true,
          message: "操作成功",
          type: "success",
        });
        this.getMenuTree();
      });
    },
    addTopMenu() {
      let data = { menu_id: 0, title: "全部菜单" };
      this.addMenu({}, data);
    },
    //添加菜单
    addMenu(node, data) {
      // console.log(node, data);
      this.editForm.menu_id = data.menu_id;
      this.editForm.parentTitle = data.title || '全部菜单';
      this.dialogVisible1 = true;
      this.formShow = true;
      this.editFormRules = this.editFormRules1;
    },
    //编辑菜单
    editMenu(node, data) {
      // console.log(data);
      this.editForm = JSON.parse(JSON.stringify(data));
      this.dialogVisible1 = true;
      this.formShow = false;
      this.editFormRules = this.editFormRules2;
    },
    //删除菜单
    removeMenu(node, data) {
      this.$confirm(`确认删除【${data.title}】?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios
          .post("admin/menu/delete", { id: data.menu_id })
          .then((res) => {
            this.$message.success("删除成功");
            this.getMenuTree();
          });
      });
    },
    //添加功能
    addFunction(data) {
      this.editForm = {}
      this.editForm.menu_id = data.menu_id;
      this.editForm.parentTitle = data.title;
      this.formShow = true
      this.dialogVisible2 = true;
    },
    handleClose2() {
      this.resetForm("editForm2");
      this.dialogVisible2 = false;
    },
    submitForm3(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.editForm.menu_platform = 1;
          this.editForm.menu_type = 2;
          // this.name = ''
          this.editForm.parent_id = JSON.parse(
            JSON.stringify(this.editForm.menu_id)
          );
          delete this.editForm.menu_id;
          // console.log(this.editForm);
          this.$axios.post("admin/menu/add", this.editForm).then((res) => {
            this.$message({
              showClose: true,
              message: "添加成功",
              type: "success",
            });
            this.clickNode(this.menuData,{level:2});
            this.dialogVisible2 = false;
          });
        } else {
          this.$message.error("请填写完整信息");
          return false;
        }
      });
    },
    submitForm4(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.editForm.menu_platform = 1;
          this.editForm.menu_type = 2;
          // this.name = ''
          // console.log(this.editForm);
          this.$axios.post("admin/menu/edit", this.editForm).then((res) => {
            this.$message({
              showClose: true,
              message: "修改成功",
              type: "success",
            });
            this.clickNode(this.menuData,{level:2});
            this.dialogVisible2 = false;
          });
        } else {
          this.$message.error("请填写完整信息");
          return false;
        }
      });
    },
    //编辑功能
    editHandle(e) {
      this.editForm = JSON.parse(JSON.stringify(e));
      this.editForm.parentTitle = this.menuData.title
      this.formShow = false
      this.dialogVisible2 = true;
    },
    //删除功能
    removeHandle(e) {
      this.$confirm(`确认删除【${e.title}】功能?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios.post("admin/menu/delete", { id: e.menu_id })
          .then((res) => {
            this.$message.success("删除成功");
            e.menu_id = e.parent_id;
            this.clickNode(e,{level:2});
          });
      })
    },
    //设置启用禁用
    setToggle(e) {
      let text = "";
      e.status == 1
        ? (text = `确认禁用【${e.title}】?`)
        : (text = `确认启用【${e.title}】?`);
      this.$confirm(text, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios
          .post("admin/menu/toggle_status", { id: e.menu_id })
          .then((res) => {
            e.menu_id = e.parent_id;
            this.clickNode(e, { level: 2 });
            this.$message({
              type: "success",
              message: res.data.msg,
            });
          });
      });
    },
    setToggleMenu(node,e) {
      let text = "";
      e.status == 1
        ? (text = `确认禁用【${e.title}】?`)
        : (text = `确认启用【${e.title}】?`);
      this.$confirm(text, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios
          .post("admin/menu/toggle_status", { id: e.menu_id })
          .then((res) => {
            this.getMenuTree()
            this.$message({
              type: "success",
              message: res.data.msg,
            });
          });
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  padding-right: 8px;
  i {
    font-size: 14px;
  }
}
.el-col {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 15px 20px;
  margin: 0 10px;
  min-height: 82vh;
}
.tree-box {
  font-size: 14px;
  margin-top: 15px;
  .el-tree-node__content > .el-tree-node__expand-icon {
    padding: 3px;
  }
  /deep/.el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: #e5ebfb;
    border-radius: 4px;
  }
  .el-tree-node__content {
    height: 30px;
  }
}
</style>